import React, { useState, useEffect } from "react";
import { useNavigate } from "react-router-dom";
import { DetailList } from "../api/index";
type Props = {};

const DetailArticle = (props: Props) => {
  const navigate = useNavigate();
  const [list, setList] = useState([]);
  useEffect(() => {
    getData();
  }, []);
  const getData = () => {
    DetailList().then((res: any) => {
      setList(res.data.data);
    });
  };

  return (
    <div>
      {list &&
        list.map((item: any, index: number) => {
          return (
            <p
              key={index}
              onClick={() =>
                navigate("/home/Details/" + item.id, { state: item })
              }
            >
              {item.title}
            </p>
          );
        })}
    </div>
  );
};

export default DetailArticle;
